<script setup lang="ts">
import { ref, nextTick, watch, onMounted, onUnmounted } from "vue"
import { useRouter, useRoute } from "vue-router"
const router = useRouter()
const route = useRoute();
// 监听元素是否在可视区域内组件
const size = ref(50)
const showNav = ref(false)
// 展示头部菜单
const showNavF = (flag: boolean) => {
  showNav.value = flag;
}
// 子组件监听进入
// 等比缩放
//获取整个界面的宽高
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
const headerNav = ref(browerWidth > 1200);
const headerRef = ref();
const headerInRef = ref();
const headerLogRef = ref();
// true 是黑
const tempFlag = ref();
//true 是小
const tempFlag2 = ref();
// 改变头部css函数
// 子组件调用
const changeHeaderCSS = (flag: boolean) => {
  // 存入暂存
  tempFlag2.value = flag;
  // 如果是小
  if (flag) {
    // 如果是白色
    if (!tempFlag.value) {
      //改变大小时如果不是黑色就变成黑色
      blackFlag.value = true;
      deleteWhiteCss();
    }
    // 添加样式为小
    nextTick(() => {
      headerRef.value.classList.add('header-small');
      headerLogRef.value.style.width = '150px';
      headerInRef.value.classList.add('header-in-small');
    })
    // 如果是大
  } else {
    // 如果是白色
    if (!tempFlag.value) {
      // 如果是framework
      if (router.currentRoute.value.path == "/" || router.currentRoute.value.path == "/framework") {
        // 改变log颜色为白
        blackFlag.value = false;
        // 改变字体颜色是白
        addWhiteCss();
      }
      // 如果是黑
    } else {
      // 改变log颜色为黑
      blackFlag.value = true;
      // 删除白色样式
      deleteWhiteCss();
    }
    // 大样式
    nextTick(() => {
      headerRef.value.classList.remove('header-small');
      headerLogRef.value.style.width = '200px';
      headerInRef.value.classList.remove('header-in-small');
    })
  }
}
const logTextRef = ref();
const logTextRef2 = ref();
const logTextRef3 = ref();
const logTextRef4 = ref();
const logTextRef5 = ref();
const blackFlag = ref(true)
const changeLogTextColor = (flag: boolean) => {
  // 当前 = 黑色
  tempFlag.value = flag;
  if (!flag) {
    //白色
    // 如果是小，改变样式为小直接return不改变颜色
    if (tempFlag2.value) {
      nextTick(() => {
        headerRef.value.classList.add('header-small');
        headerLogRef.value.style.width = '150px';
        headerInRef.value.classList.add('header-in-small');
      })
      return;
    }
    // 如果是大
    //否则更换为白色样式
    blackFlag.value = false;
    // 改变字体颜色是白
    addWhiteCss();
  } else {
    // 如果是黑色
    nextTick(() => {
      // 更换为黑色样式
      blackFlag.value = true;
      // 删除白色样式
      deleteWhiteCss();
    })
  }
}
const addWhiteCss = () => {
  if (logTextRef.value) {
    logTextRef.value.classList.add('nav-text-w');
    logTextRef2.value.classList.add('nav-text-w');
    logTextRef3.value.classList.add('nav-text-w');
    logTextRef4.value.classList.add('nav-text-w');
    logTextRef5.value.classList.add('nav-text-w');
  }
}
const deleteWhiteCss = () => {
  if (logTextRef.value) {
    logTextRef.value.classList.remove('nav-text-w');
    logTextRef2.value.classList.remove('nav-text-w');
    logTextRef3.value.classList.remove('nav-text-w');
    logTextRef4.value.classList.remove('nav-text-w');
    logTextRef5.value.classList.remove('nav-text-w');
  }
}
const listenerReSize = () => {
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if (browerWidth < 1200) {
    //头部菜单变为图标
    headerNav.value = false;
    changeHeaderCSS(true)
  } else {
    // 头部图标变为菜单
    headerNav.value = true;
    changeHeaderCSS(false)
  }
}
window.addEventListener('resize', listenerReSize);
const currentPath = ref({});
const changeNavActive = () => {
  if (router.currentRoute.value.path == '/case') {
    if (logTextRef.value) {
      logTextRef.value.classList.add('highLight');
      logTextRef2.value.classList.remove('highLight');
      logTextRef3.value.classList.remove('highLight');
      logTextRef4.value.classList.remove('highLight');
      logTextRef5.value.classList.remove('highLight');
    }
  }
  else if (router.currentRoute.value.path == '/service') {
    if (logTextRef.value) {
      logTextRef.value.classList.remove('highLight');
      logTextRef2.value.classList.add('highLight');
      logTextRef3.value.classList.remove('highLight');
      logTextRef4.value.classList.remove('highLight');
      logTextRef5.value.classList.remove('highLight');
    }
  }
  else if (router.currentRoute.value.path == '/about') {
    if (logTextRef.value) {
      logTextRef.value.classList.remove('highLight');
      logTextRef2.value.classList.remove('highLight');
      logTextRef3.value.classList.add('highLight');
      logTextRef4.value.classList.remove('highLight');
      logTextRef5.value.classList.remove('highLight');
    }
  }
  else if (router.currentRoute.value.path == '/idea') {
    if (logTextRef.value) {
      logTextRef.value.classList.remove('highLight');
      logTextRef2.value.classList.remove('highLight');
      logTextRef3.value.classList.remove('highLight');
      logTextRef4.value.classList.add('highLight');
      logTextRef5.value.classList.remove('highLight');
    }
  }
  else if (router.currentRoute.value.path == '/contact') {
    if (logTextRef.value) {
      logTextRef.value.classList.remove('highLight');
      logTextRef2.value.classList.remove('highLight');
      logTextRef3.value.classList.remove('highLight');
      logTextRef4.value.classList.remove('highLight');
      logTextRef5.value.classList.add('highLight');
    }
  } else {
    if (logTextRef.value) {
      logTextRef.value.classList.remove('highLight');
      logTextRef2.value.classList.remove('highLight');
      logTextRef3.value.classList.remove('highLight');
      logTextRef4.value.classList.remove('highLight');
      logTextRef5.value.classList.remove('highLight');
    }
  }
}
watch(
  () => route,
  (newVal) => {
    if (newVal.path != currentPath.value) {
      currentPath.value = newVal.path
    }
    changeNavActive();
  },
  { immediate: true, deep: true });
onMounted(() => {
  changeNavActive();
})
onUnmounted(() => {
  window.removeEventListener('resize', listenerReSize);
})
</script>

<template>
  <!-- 菜单 -->
  <el-backtop :right="100" :bottom="100" style="background:none;border:1px solid #999">
    <div style="background:none;">
      <el-icon color="#999" size="20">
        <ArrowUp />
      </el-icon>
    </div>
  </el-backtop>
  <transition name="el-zoom-in-top">
    <div class="menu" v-if="showNav">
      <div class="menu-header flex">
        <img src="../assets/logo.png" width="150px" height="20.25px" />
        <el-icon size="30" color="#000" @click="showNavF(false)">
          <CloseBold />
        </el-icon>
      </div>
      <div class="menu-main">
        <div class="menu-item">
          <a class="cursor" @click="router.push('/'); showNavF(false)">首页 Home</a>
        </div>
        <div class="menu-item">
          <a class="cursor" @click="router.push('/about'); showNavF(false)">关于 About</a>
        </div>
        <div class="menu-item">
          <a class="cursor" @click="router.push('/case'); showNavF(false)">作品 Projects</a>
        </div>
        <div class="menu-item">
          <a class="cursor" @click="router.push('/idea'); showNavF(false)">新闻 News</a>
        </div>
        <div class="menu-item">
          <a class="cursor" @click="router.push('/contact'); showNavF(false)">联系 Contact</a>
        </div>
      </div>
      <div></div>
    </div>
  </transition>
  <!-- 页面顶部 -->
  <el-affix :offset="0">
    <div class="header tran" ref="headerRef">
      <div class="header-in tran" ref="headerInRef">
        <div class="left" style="position:relative;" @click="router.push('/')">
          <img class="header-img tran" width="200px" v-if="blackFlag" ref="headerLogRef" src="../assets/logo.png"
            alt="品牌设计logo">
          <img class="header-img tran" v-if="!blackFlag" width="200px" ref="headerLogRef" src="../assets/logo-oth.png"
            alt="品牌设计logo">
        </div>
        <div class="text-align-right">
          <el-space wrap :size="size" v-if="headerNav">
            <el-text class="nav-text"><a class="tran cursor" @click="router.push('/case')" ref="logTextRef">Work
                作品</a></el-text>
            <el-text class="nav-text"><a class="tran cursor" @click="router.push('/service')" ref="logTextRef2">Service
                业务</a></el-text>
            <el-text class="nav-text"><a class="tran cursor" @click="router.push('/about')" ref="logTextRef3">Profile
                关于</a></el-text>
            <el-text class="nav-text"><a class="tran cursor" @click="router.push('/idea')" ref="logTextRef4">Idea
                观点</a></el-text>
            <el-text class="nav-text"><a class="tran cursor" @click="router.push('/contact')" ref="logTextRef5">Contact
                联系</a></el-text>
          </el-space>
          <div v-else class="header-icon">
            <div>
              <el-icon size="30" color="#000" @click="showNavF(true)">
                <Fold />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-affix>
  <!-- <div class="toptop">
      <div class="toptop-in">
        友情链接: <el-link href="https://www.baidu.com">百度</el-link>
      </div>
    </div> -->
  <router-view @changeHeaderCSS="changeHeaderCSS" @changeLogTextColor="changeLogTextColor"></router-view>
  <!-- footer -->
  <div class="footer">
    <el-row>
      <el-col :sm="24" :lg="11">
        <div style="padding:20px 0;">
          <div>
            <img class="img1" width="30px" src="../assets/logo2.png" alt="品牌设计logo"> &nbsp;
            <img class="img1" width="150px" src="../assets/logo-oth.png" alt="品牌设计logo">
          </div>
          <div class="first div-ul">
            <ul class="f1f0f0">
              <li class="footer-bottom">北京市大兴区新源大街27号院4号楼104室</li>
              <li class="footer-bottom">地铁4号线义和庄A口</li>
              <li class="footer-bottom">TEL : <span style="display: inline-block;">176-0015-0448</span> &nbsp;&nbsp;
                <span style="display: inline-block;">176-0012-4818</span>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="8">
        <div class="flex f999" v-if="headerNav" style="padding:20px 0;max-width:300px">
          <div class="left">
            <div class="title">全部设计案例</div>
            <div class="div-ul">
              <ul>
                <li class="footer-bottom">品牌设计全案</li>
                <li class="footer-bottom">运营设计</li>
                <li class="footer-bottom">UI设计案例</li>
              </ul>
            </div>
          </div>
          <div class="right">
            <div class="title">设计认知观点</div>
            <div class="div-ul">
              <ul>
                <li class="footer-bottom">品牌设计全案</li>
                <li class="footer-bottom">运营设计</li>
                <li class="footer-bottom">UI设计案例</li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :sm="24" :lg="5">
        <div class="copyright">
          <div class="copy-text footer-bottom">COPYRIGHT (©) 2024 抖酷设计 <br>京ICP备2024067858号</div>
          <br>
          <div class="flex">
            <div class="flex-content">
              <img src="../assets/doukushipin.jpg" class="f-img" />
              <p class="footer-img-text">视频号</p>
            </div>
            <div class="flex-content">
              <img src="../assets/douwuweixin.jpg" class="f-img" />
              <p class="footer-img-text">公众号</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.toptop {
  position: absolute;
  z-index: 10000;
  width: 100%;
  height: 20px;
  background-color: #e3e4e5;

  .toptop-in {
    height: 20px;
    width: 95%;
    margin: 0 auto;
  }
}

.menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #fff;
  z-index: 10000000;
  padding: 3% 2.5%;

  .menu-main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
    height: 50%;
    line-height: 50%;
    align-items: center;
    align-items: center;

    .menu-item {
      text-align: left;
      display: block;
      width: 100%;
      height: 14%;
      font-weight: 600;
      line-height: 100%;
      color: #666;
      a{
        font-size: 20px;
      }
    }
  }
}

.header {
  z-index: 999;
  width: 100%;
  height: 100px;
  position: fixed;
}

.header-small {
  height: 40px;
  background-color: #fff;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
}



.header-in {
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  margin: 35px auto;
  vertical-align: middle;
  width: 95%;

  img {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
  }

  // .logo{
  //   display: block;
  //   width: 100%;
  //   height: 30px;
  //   line-height: 30px;
  //   img{
  //     display: inline-block;
  //     vertical-align: middle;
  //   }
  //   span{
  //     display: inline-block;
  //     width: 0;
  //     height: 100%;
  //     vertical-align: middle;
  // }
  // }
  .header-icon {
    cursor: pointer;
  }
}

.header-in-small {
  height: 30px;
  height: 30px;
  vertical-align: middle;
  margin: 5px auto;
  width: 95%;
}

.nav-text {
  color: #000;
  cursor: pointer;
  font-weight: 300;
}

.nav-text-w {
  color: #fff !important;
}

.text-align-right {
  height: 100%;

  .highLight {
    font-weight: 550;
  }

  a {
    font-size: 1.125em;
    color: #000;
  }
}

.footer {
  .f-img {
    width: 100px;
    height: 100px;
  }

  .copyright {
    max-width: 280px;

    .copy-text {
      margin-bottom: 10px;
    }

    .flex-content {
      text-align: center;

      p {
        margin-top: 10px;
      }
    }
  }

  padding:70px 80px;
  background-color:#333;

  .title {
    cursor: pointer;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
    color: #fff;
  }

  .first {
    margin-left: 40px;
  }

  .f1f0f0 {
    color: #f1f0f0;
  }

  .f999 {
    color: #999;
  }

  .div-ul {
    margin-top: 20px;

    ul {

      li {

        transition: all .3s ease;
        padding: 4px 0;

      }
    }
  }
}

.footer-bottom {
  color: rgba(255, 255, 255, 0.3);
  line-height: 1.5;
}

.footer-img-text {
  color: rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 1200px) {
  .header-img {
    width: 150px;
  }

  .footer {
    padding: 30px 40px 60px
  }

  .footer ul li {
    font-size: 14px !important;
  }

  .footer .first {
    margin-left: 0;
  }

  .footer .copy-text {
    font-size: 14px !important;

  }

  .footer .footer-bottom {
    line-height: 1.2;
  }

  .footer .f-img {
    width: 80px;
    height: 80px;
  }
}
</style>